<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>流水账后台系统管理</title>
<link rel="stylesheet" type="text/css" href="/static/plugins/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="/static/css/account/accountList.css">
<style type="text/css">
.layui-table-local{
    position: relative;
    width: auto;
    margin-left: 30px;
}
</style>
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<!-- header nav部分 -->
		<div th:insert="~{/common/common :: copy}"></div>
		<div class="layui-body">
			<div class="layui-fluid layui-from-consider">
				<h2 class="title">流水基本数据表单</h2>
				<div class="layui-row">
					<div class="layui-col-md12">
						<form class="layui-form" action="" id="accountForm">
							<div class="layui-row">
								<div class="layui-col-md3">
									<div class="layui-form-item">
										<label class="layui-form-label">支出日期</label>
										<div class="layui-input-inline">
											<input type="text" name="payTime" id="payTime" required lay-verify="required" placeholder="请输入支出日期" autocomplete="off" class="layui-input">   
										</div>
									</div>
								</div>
								<div class="layui-col-md3">
									<div class="layui-form-item">
										<label class="layui-form-label">支付者姓名</label>
										<div class="layui-input-inline">
											<input type="text" name="userName" th:value="${session.userSession.realName}" required lay-verify="required" placeholder="支付者姓名" autocomplete="off" class="layui-input" readonly="readonly">   
										</div>
									</div>
								</div>
								<div class="layui-col-md3">
									<div class="layui-form-item">
										<label class="layui-form-label">支出总金额</label>
										<div class="layui-input-inline">
											<input type="text" name="sumPayMoney" id="sumPayMoney"  placeholder="系统计算总金额" autocomplete="off" class="layui-input" disabled>   
											<span class="yuan">元</span>
										</div>
									</div>
								</div>
								<div class="layui-col-md3">
									<div class="layui-form-item">
										<div class="layui-input-block">
											<button class="layui-btn" lay-submit lay-filter="accountSubmit">保存</button>
										</div>
									</div>
								</div>
							</div>
							<div class="layui-row">
								<span class="layui-warm"><i class="layui-icon layui-icon-about"></i>只有选择支出类型时才能录入相对应的数据</span>
								<table class="layui-table layui-input-block layui-table-local" id="layui-table-filter" >
									<colgroup>
										<col width="150">
										<col width="150">
										<col width="600">
										<col width="600">
									</colgroup>
									<thead>
										<tr>
											<th>支出类型</th>
											<th>支出金额(单位:元)</th>
											<th>描述</th>
											<th>备注</th>
										</tr> 
									</thead>
									<tbody>
										<tr th:each="type,typeStat:${types}">
											<td>
												<input type="checkbox"  th:value="${type.typeCode}" th:attr="title=${type.typeName},id='typeCode'+${typeStat.index},name='typeCode[' + ${typeStat.index} + ']'" lay-filter="typeCode">
											</td>
											<td>
												<input type="text" th:attr="name='payMoney[' + ${typeStat.index} + ']',id='payMoney'+${typeStat.index}"  placeholder="￥" autocomplete="off" class="layui-input pay-money" onchange="valiteNumber(this)">
											</td>
											<td>
												<div class="expressDiv" th:if="${type.typeCode eq 'KDF'}">
													<select name="expressCode" id="expressCode" class="layui-select" placeholder="${type.description}" lay-verify="" lay-filter="expressCode" lay-search>
													</select> 
												</div>
												<div class="expressDiv" th:if="${type.typeCode ne 'KDF'}">
													<input type="text" th:attr="name='description[' + ${typeStat.index} + ']',placeholder=${type.description},id='description' + ${typeStat.index}" autocomplete="off" class="layui-input" style="width: 100%;">
												</div>
											</td>
											<td>
												<input type="text" th:attr="id='remake' + ${typeStat.index},name='remake[' + ${typeStat.index} + ']'"  placeholder="备注" autocomplete="off" class="layui-input" style="width: 100%;">
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="layui-fluid layui-from-consider">
				<h2 class="title">流水数据列表总览</h2>
				<form class="layui-form" action="" id="accountQuery">
					<div class="layui-row">
						<div class="layui-col-md12">
							<div class="layui-col-md6">
								<div class="layui-form-item">
									<label class="layui-form-label">支出日期</label>
									<div class="layui-input-inline">
										<input type="text" name="payTime" id="payStart" class="layui-input pay-start" placeholder="起始日期" autocomplete="off">
										<div class="layui-set"><span class="layui-span-font">至</span></div>
									</div>
									<div class="layui-input-inline">
										<input type="text" name="payTime" id="payEnd" class="layui-input pay-end" placeholder="结束日期" autocomplete="off">
									</div>
								</div>
							</div>
							<div class="layui-col-md3">
								<div class="layui-form-item">
									<label class="layui-form-label">支出类型</label>
									<div class="layui-input-inline">
										<select name="typeCode" id="typeCode" lay-search></select>  
									</div>
								</div>
							</div>
							<div class="layui-col-md3">
								<div class="layui-form-item">
									<div class="layui-input-block">
										<input type="button" value="查找" class="layui-btn" id="searchBtn"></input>
									</div>
								</div>
							</div>
						</div>
					</div>
				</form>
				<div class="layui-row">
					<table class="layui-hide" id="accountTable" lay-filter="accountTable"></table>
					<script type="text/html" id="accountBar">
						<a class="layui-btn layui-btn-xs" lay-event="detail">
							<i class="layui-icon layui-icon-edit"></i>查看
						</a>
					</script>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="/static/js/jquery-3.5.1.min.js"></script>
	<script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
	<script type="text/javascript" src="/static/plugins/layui/layui.all.js"></script>
	<script type="text/javascript" src="/static/js/common/common.js"></script>
	<script type="text/javascript" src="/static/js/account/accountList.js"></script>
</body>
</html>
